<!-- <script setup lang="ts">
import { RouterView, useRouter } from 'vue-router'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
let router = useRouter()
let arr = [
  {
    path: "/home/myw",
    title: "我的作品"
  },
  {
    path: "/home/coll",
    title: "协作作品"
  },
  {
    path: "/myb",
    title: "我的工作台"
  }
]
let GoRouter = (path: string) => {
  router.push(path)

}
</script>

<template>
  <div class="home">
    <div class="header">

    </div>
    <div class="main">

      <div class="left">
        <div class="leftone">
          <el-menu active-text-color="#fff" background-color="#eee" class="el-menu-vertical-demo" default-active="2"
            text-color="#fff" @open="handleOpen" @close="handleClose">
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
              </template>
              <el-menu-item-group class="ul" title="" v-for="(item, index) in arr" :key="index">
                <span class="sps" @click="GoRouter(item.path)">{{ item.title }}</span>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </div>
        <div class="lefttwo">
        
        </div>
      </div>
      <div class="middle">
        <RouterView></RouterView>
      </div>
      <div class="right">
        <div class="rightone">
        
        </div>
        <div class="righttwo">
        
        </div>

      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>

<style scoped lang="scss">
// 在app里面解决10px间距问题
/* 设置外部容器的样式，使用Flexbox进行布局 */
* {
  font-weight: 800;
  font-size: 52px;

}

.sps {
  color: #ccc;
  font-size: 19px;
}

.home {
  display: flex;
  flex-direction: column;
  /* 子元素垂直排列 */
  width: 100vw;
  height: 100vh;
  /* 视口高度，确保布局占满全屏 */
  /* 移除默认的内边距 */
  box-sizing: border-box;
  /* 包含内边距和边框在元素的总宽度和总高度内 */
}

/* 头部样式 */
.header {
  height: 50px;
  /* 根据需要设置高度 */
  // background-color: #333; /* 设置背景色 */  
  color: #fff;
  /* 设置文本颜色 */
  display: flex;
  /* 可选：如果需要在头部内部进行水平布局 */
  align-items: center;
  /* 可选：垂直居中 */
  justify-content: center;
  /* 可选：水平居中 */
  // border: 2px solid black;
}

/* 主体样式 */
.main {
  flex: 1;
  /* 占据剩余空间 */
  // background-color: #12cd66; /* 设置背景色 */  

  /* 添加内边距 */
  overflow: hidden;
  /* 垂直滚动，如果内容过多 */
  // border: 2px solid black;
  // position: relative;

  display: flex;

}

/* 底部样式 */
.footer {
  height: 50px;
  /* 根据需要设置高度 */
  // background-color: #333; /* 设置背景色 */  
  color: #fff;
  /* 设置文本颜色 */
  display: flex;
  /* 可选：如果需要在底部内部进行水平布局 */
  align-items: center;
  /* 可选：垂直居中 */
  justify-content: center;
  /* 可选：水平居中 */
}

.left {
  width: 20%;
  height: 100%;
  // position: absolute;
  // left: 0%;
  // top: 0%;
  // border: 2px solid black;

  .leftone {
    height: 50%;
    // border: 2px solid black;
  }

  .lefttwo {
    height: 50%;
  }
}

.middle {
  width: 60%;
  height: 100%;
}

.right {
  width: 25%;
  height: 100%;
  .rightone {
    height: 50%;
    // border: solid 2px black;

  }

  .righttwo {
    height: 50%;
    // border: solid 2px black;
  }
}

.el-menu-vertical-demo {
  width: 100%;
  height: 100%;
}

.ul {
  line-height: 17px;
  padding-left: 10px
}
</style> -->
<template>
  <div class="home">
    <div class="header">
      <button class="tc" @click="TC"><svg :class="{ 'hover-gradient': isHovering }" @mouseenter="isHovering = true"
          @mouseleave="isHovering = false" class="svg" t="1715667216497" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="7238" width="200" height="200">
          <path
            d="M837.818182 1024H186.181818c-102.865455 0-186.181818-83.316364-186.181818-186.181818V186.181818c0-102.865455 83.316364-186.181818 186.181818-186.181818h651.636364c102.865455 0 186.181818 83.316364 186.181818 186.181818v651.636364c0 102.865455-83.316364 186.181818-186.181818 186.181818z"
            fill="#FC5656" p-id="7239"></path>
          <path
            d="M511.767273 942.312727c-92.625455 0-185.483636-33.512727-258.792728-101.236363-74.705455-69.12-117.992727-163.374545-122.181818-265.076364-3.723636-101.701818 32.116364-198.749091 101.236364-273.687273a381.44 381.44 0 0 1 111.243636-83.083636c11.636364-5.585455 25.6-0.930909 31.185455 10.472727 5.585455 11.636364 0.930909 25.6-10.472727 31.185455-36.770909 18.152727-69.585455 42.589091-97.512728 73.076363a332.450909 332.450909 0 0 0-88.669091 240.407273 332.567273 332.567273 0 0 0 107.054546 232.727273c135.447273 125.44 347.694545 117.061818 472.901818-18.385455 60.741818-65.629091 92.16-151.04 88.669091-240.407272a332.8 332.8 0 0 0-107.287273-232.727273c-20.247273-18.618182-42.589091-34.909091-66.56-47.941818-11.170909-6.283636-15.36-20.247273-9.309091-31.650909 6.283636-11.170909 20.247273-15.36 31.650909-9.309091 27.229091 14.894545 52.829091 33.28 75.869091 54.690909 74.705455 69.12 118.225455 163.374545 122.181818 265.076363 3.956364 101.701818-31.883636 198.981818-101.003636 273.687273-75.170909 81.221818-177.570909 122.181818-280.203636 122.181818z"
            fill="#FFFFFF" p-id="7240"></path>
          <path
            d="M512 477.556364c-12.8 0-23.272727-10.472727-23.272727-23.272728V144.523636c0-12.8 10.472727-23.272727 23.272727-23.272727s23.272727 10.472727 23.272727 23.272727v309.527273c0 13.032727-10.472727 23.505455-23.272727 23.505455z"
            fill="#FFFFFF" p-id="7241"></path>
        </svg></button>

    </div>
    <div class="main">
      <div class="left">
        <div class="leftone">
          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button :value="false"><el-icon>
                <Unlock />
              </el-icon> </el-radio-button>
            <el-radio-button :value="true"><el-icon>
                <Lock />
              </el-icon></el-radio-button>
          </el-radio-group>
          <div class="photo">

            <img :src="userImgBase64" alt="" class="imim" />

            <!-- <div v-else>Loading...</div> -->
            <div class="zm">
              <span>账号: {{ username }}</span><br />
              <span>密码: {{ XingPwd }}</span><br />
              <span>身份：{{ identityId }}</span>
            </div>

          </div>
          <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
            @close="handleClose">
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <Avatar />
                </el-icon>
              </template>
              <el-menu-item-group class="ul" title="" v-for="(item, index) in arr" :key="index">
                <span class="sps" @click="GoRouter(item.path)">{{ item.title }}</span>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </div>
        <div class="lefttwo">
        </div>
      </div>
      <div class="middle">
        <RouterView></RouterView>
      </div>
      <div class="right">
        <div class="rightone">

        </div>
        <div class="righttwo">
        </div>
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { RouterView, useRouter } from 'vue-router'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

// const  router=useRouter()
const isCollapse = ref(false)
// 响应式引用，用于跟踪鼠标是否悬停在元素上  
const isHovering = ref(false);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
let router = useRouter()
let arr = [
  {
    path: "/home/myw",
    title: "我的作品"
  },
  {
    path: "/home/coll",
    title: "协作作品"
  },
  {
    path: "/myb",
    title: "我的工作台"
  },
    {
    path: "/home/hui",
    title: "回收站"
  }
]
let GoRouter = (path: string) => {
  router.push(path)

}
const userImgBase64 = ref('');
const username = ref('')
const password = ref('')
const identityId = ref('')
const userId = ref('')
const XingPwd = ref('*********')




// 组件加载后执行  
onMounted(() => {
  const storedData = sessionStorage.getItem('userImg');
  if (storedData) {
    // 将 JSON 字符串转换回对象或对象数组  
    const data = JSON.parse(storedData);

    // 假设我们只需要处理数组中的第一个对象  
    if (Array.isArray(data) && data.length > 0) {
      // 提取第一个对象的 img 属性值  
      userImgBase64.value = data[0].img;
      username.value = data[0].username;
      password.value = data[0].password
    } else if (typeof data === 'object' && data !== null) {
      // 如果存储的只是一个单独的对象，直接提取 img 属性值  
      userImgBase64.value = data.img;
      username.value = data.username;
      password.value = data.password

    }
  } else {
    // 如果没有找到数据，可以设置一个默认的图片 URL 或处理错误  
    userImgBase64.value = 'default-image-url';
    XingPwd.value = password.value
  }

});


let TC = () => {
  let token: any = sessionStorage.removeItem('token')
  if (!token && confirm("确定清除token,返回登录页吗？")) {
    sessionStorage.removeItem('token')
    sessionStorage.removeItem('token')
    sessionStorage.removeItem('users')
    sessionStorage.removeItem('userId')
    sessionStorage.removeItem('userImg')
    sessionStorage.removeItem('username')
    router.push('/')
  }
}
</script>


<style scoped lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.photo {
  // height: 100px;
  height: 150px;
  position: relative;
  // background: tan;

  .imim {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-left: 5px;
  }

  .zm {
    position: absolute;
    left: 5%;
    line-height: 30px;
    color: #ccc;

  }
}

* {
  font-weight: 800;


}

.sps {
  color: #ccc;
  font-size: 19px;
}

.home {
  display: flex;
  flex-direction: column;
  /* 子元素垂直排列 */
  width: 100vw;
  height: 100vh;
  /* 视口高度，确保布局占满全屏 */
  /* 移除默认的内边距 */
  box-sizing: border-box;
  /* 包含内边距和边框在元素的总宽度和总高度内 */
}

/* 头部样式 */
.header {
  height: 50px;
  /* 根据需要设置高度 */
  // background-color: #333; /* 设置背景色 */  
  color: #fff;
  /* 设置文本颜色 */
  display: flex;
  /* 可选：如果需要在头部内部进行水平布局 */
  align-items: center;
  /* 可选：垂直居中 */
  justify-content: center;
  position: relative;
  /* 可选：水平居中 */
  // border: 2px solid black;
}

/* 主体样式 */
.main {
  flex: 1;
  /* 占据剩余空间 */
  // background-color: #12cd66; /* 设置背景色 */  

  /* 添加内边距 */
  overflow: hidden;
  /* 垂直滚动，如果内容过多 */
  // border: 2px solid black;
  // position: relative;

  display: flex;

}

/* 底部样式 */
.footer {
  height: 50px;
  /* 根据需要设置高度 */
  // background-color: #333; /* 设置背景色 */  
  color: #fff;
  /* 设置文本颜色 */
  display: flex;
  /* 可选：如果需要在底部内部进行水平布局 */
  align-items: center;
  /* 可选：垂直居中 */
  justify-content: center;
  /* 可选：水平居中 */
}

.left {
  width: 20%;
  height: 100%;
  // position: absolute;
  // left: 0%;
  // top: 0%;
  // border: 2px solid black;

  .leftone {
    height: 50%;
    // border: 2px solid black;
    position: absolute;
    top: 0%;
  }

  .lefttwo {
    height: 50%;
  }
}

.middle {
  width: 60%;
  height: 100%;
}

.right {
  width: 25%;
  height: 100%;

  .rightone {
    height: 50%;
    // border: solid 2px black;

  }

  .righttwo {
    height: 50%;
    // border: solid 2px black;
  }
}

.el-menu-vertical-demo {
  width: 100%;
  height: 100%;
}

.ul {
  line-height: 17px;
  padding-left: 10px
}

.tc {
  position: absolute;
  right: 3%;
  border: 0;
  background: 0;

  .svg {
    font-size: 20px;
    width: 40px;
    height: 30px;
    cursor: pointer; //小手样式
  }
}



.hoverable {
  /* 默认样式 */
  background-color: #f0f0f0;
  color: #333;
  padding: 10px;
  transition: background 0.3s;
  /* 渐变背景色可能需要额外的处理来平滑过渡 */
}

.hover-gradient {
  background: linear-gradient(to right, pink, orange, #000);
  /* 从白色渐变到粉红色 */
}
</style>
